/**
 * @file icon-button
 * @author liaoxuezhi@baidu.com
 */
/* eslint fecs-indent: [0, "space", 2, 2] */

import * as React from 'react';
import {
  PureComponent,
  PropTypes
} from 'react';
import {Renderer, normalizeLink, tokenize} from './renderer';
import OnExpression from './hoc/on-expression';
import * as cx from 'classnames';
import {Link} from 'react-router';
import * as schema from './action-schema.json';
import TooltipWrapper from '../widgets/tooltip';
import {isAmisSite} from '../util/helper';
import * as assign from 'object-assign';
import * as debounce from 'lodash/debounce';


@Renderer({
  name: 'action',
  desc: '...',
  test: (path, config) => /\/(?:action|button)$/.test(path),
  schema
})
@OnExpression
export default class Action extends PureComponent {
  static propTypes = {
    className: PropTypes.string,
    icon: PropTypes.string,
    actionType: PropTypes.oneOf(['ajax', 'dialog', 'url', 'link', 'cancel', 'prev', 'next', 'reload', 'copy', 'submit', 'reset', 'custom-fetchCrudSchema', 'custom-fetchFormSchema', 'deleteRow']),
    tooltip: PropTypes.string,
    onRequestAction: PropTypes.func
  };

  static defaultProps = {
    className: '',
    tooltipPlacement: 'top'
  };

  constructor(props) {
    super(props);

    this.handleClick = this.handleClick.bind(this);
    this.handleClick = debounce(this.handleClick, 500, {
      leading: true,
      trailing: false
    });
  }

  handleClick(e) {
    const {onRequestAction, item, data, $rowIndex} = this.props;

    e.preventDefault();
    onRequestAction(assign({}, this.props), item || data, $rowIndex);
    return false;
  }

  renderButton() {
    let {
      className,
      icon,
      disabled,
      label,
      level,
      primary,
      block,
      actionType,
      link,
      item,
      data,
      size,
      type
    } = this.props;

    const isLink = !label && !level;
    size = size || (isLink ? 'sm' : '');

    const btnProps = {
      disabled,
      type: type === 'submit' ? 'submit' : 'button',
      className: cx('btn', className || !isLink && 'btn-default', {
        'disabled': disabled,
        'btn-primary': primary || level === 'primary',
        'btn-block': block,
        'btn-link': isLink
      }, level ? `btn-${level}` : '', size ? `btn-${size}` : '')
    };

    if (actionType === 'link' && link !== 'goBack') {
      return isAmisSite() ? (
          <Link
            {...btnProps}
            to={link ? normalizeLink(tokenize(link, item || data || {}, data)) : ''} activeClassName="active"
          >
            {label}
            {icon && (<i className={icon} />)}
          </Link>
        ) : (
        <a
          {...btnProps}
          href={link ? normalizeLink(tokenize(link, item || data || {}, data)) : ''} activeClassName="active"
        >
          {label}
          {icon && (<i className={icon} />)}
        </a>
      );
    } else {
      btnProps.onClick = this.handleClick;
    }

    return (
      <button
        {...btnProps}
      >
        {icon && (<i className={icon} />)}
        {label}
      </button>
    );
  }

  render() {
    const {
      tooltip,
      tooltipPlacement,
      $path
    } = this.props;
    const btn = this.renderButton();

    return (
      <TooltipWrapper id={$path} tooltip={tooltip} placement={tooltipPlacement}>
        {btn}
      </TooltipWrapper>
    );
  }
}
